import React from 'react';
import Image from 'next/image';
import { Star } from 'lucide-react';
import CTAForm from './CTAForm';

export default function Hero() {
  return (
    <div className="pt-8 mx-auto container">
      <div className="">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
          {/* Left Column - Text Content */}
          <div className="order-2 lg:order-1">
            <div className="mt-6">
              <h1 className="text-3xl font-extrabold text-gray-900 tracking-normal sm:text-5xl">
                VideoFlow 视频制作管理
              </h1>
              <p className="mt-6 text-3xl text-gray-700">
                提升<span className="text-red-500 font-bold">企业培训视频</span>、<span className="text-red-500 font-bold">短视频内容营销</span>、<span className="text-red-500 font-bold">在线课程制作</span>的全流程创作效率！
              </p>
              <p className="mt-6 text-xl text-gray-500">
                功能：项目文案、制作进度、文案创作、脚本管理
              </p>
              <p className="mt-1 text-xl text-gray-500">
                工具：提词器、封面制作、音乐库、PPT制作
              </p>
            </div>
            <div className="mt-6">
              <CTAForm />
            </div>
            <div className="mt-6">
              <div className="inline-flex items-center divide-x divide-gray-300">
                <div className="flex-shrink-0 flex pr-5">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-5 w-5 text-yellow-400" />
                  ))}
                </div>
                <div className="min-w-0 flex-1 pl-5 py-1 text-sm text-gray-500 sm:py-3">
                  <span className="font-medium text-gray-900">开放内测中</span>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Video */}
          <div className="relative mx-auto aspect-video w-full rounded-xl shadow-2xl overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-r from-rose-500/10 to-rose-900/10 blur-2xl" />
            <iframe
              src="https://player.bilibili.com/player.html?aid=1303495705&bvid=BV1Bu4m1F7zv&cid=1509806825&p=1&high_quality=1&danmaku=0&muted=1"
              className="relative w-full h-full rounded-xl border border-gray-200/50"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              loading="lazy"
            />
            <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black/50 to-transparent" />
          </div>
        </div>
      </div>
    </div>
  );
}
